<template>
	<!-- 门票详情 -->
	<view class="detail-wrapper">
		<MyNavbar title="门票详情" />
		
		<div v-if="ticketData" style="position: relative;">
			<!-- 背景图虚化 -->
			<div>
				<u-image class="el-blur" :fade="false" height="200rpx" width="100%" :src="ticketData.poster"/>
			</div>
			
			<!-- 详细信息 -->
			<div style="position: absolute;top: 0;width: 100%;top: 200rpx;" >
				<div class="info-box" style="border-radius: 24rpx 24rpx 0 0;">
					<!-- 头像、标题、价格 -->
					
					<div class="flex" style="padding: 24rpx; top: -200rpx;position: relative;">
						<!-- 封面图 -->
						<div style="margin-right: 24rpx;">
							<u-image :src="ticketData.poster" :fade="false" radius="6" height="340rpx" width="280rpx"/>
						</div>
						<div class="flex-column" style="">
							<div style="height: 200rpx;font-size: 42rpx;color: #FFFFFF;">{{ticketData.title}}</div>
							<div style="color: red;">
								<span>￥</span>
								<span style="font-size: 42rpx;">{{ticketData.price}}</span>
							</div>
							
							<div style="font-size: 26rpx;">
								{{ticketData.state===1?'在售':'停售'}}
								<span v-if="ticketData.state===1" style="margin-left: 12rpx;"> | 剩余: {{ticketData.stock}}</span>
							</div>
						</div>
					</div>
					
					<!-- 基础信息 -->
					<div style="position: relative;top: -200rpx">
						<u-cell>
							<div slot="title">
								<div class="flex">
									<u-icon style="margin-right: 12rpx;" name="info-circle-fill" color="#fb9739" label="支持退票"/>
									<u-icon style="margin-right: 12rpx;" name="info-circle-fill" color="#fb9739" label="快递票"/>
									<u-icon style="margin-right: 12rpx;" name="info-circle-fill" color="#fb9739" label="纸质发票"/>
								</div>
							</div>
						</u-cell>
						
						<u-cell label="以现场为准" is-link>
							<span slot="title">{{ticketData.beginTime}} 至 {{ticketData.endTime}}</span>
						</u-cell>
						
						<u-cell 
							:title="ticketData.city "  
							right-icon="map"
							:label="ticketData.address" is-link>
						</u-cell>
					</div>
				</div>
				
				<!-- 温馨提示 -->
				<div style="background-color: #f4f4f4;top:-200rpx;position: relative;padding-top: 24rpx;">
					<u-cell title="温馨提示" style="background-color: #FFFFFF;">
						<span slot="label">
							{{ticketData.tips}}
						</span>
					</u-cell>
					
					<u-cell title="详情" style="background-color: #FFFFFF;margin-top: 24rpx;">
						<span slot="label">
							{{ticketData.details}}
						</span>
					</u-cell>
				</div>
				
			</div>
		</div>
		
		
		<u-tabbar
			:fixed="true"
			:placeholder="true"
			:safeAreaInsetBottom="true"
		>
			<div style="width: 100%;height: 100%;" class="flex flex-center">
				<div class="flex" style="padding: 0 24rpx;">
					<u-icon size="50rpx" name="thumb-up" label="推荐" labelPos="bottom"></u-icon>
					<div style="width: 24rpx;"></div>
					<u-icon size="50rpx" name="heart" label="收藏" labelPos="bottom"></u-icon>
				</div>
				<div style="width: 0; flex:1;padding-right: 24rpx;" class="flex">
					<u-button plain text="分享"></u-button>
					<u-button type="primary" text="立即购买" @click="onClickBuy()"></u-button>
				</div>
			</div>
		</u-tabbar>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				ticketData: null,
			}
		},
		onLoad(option) {
			this.getGoods(option.uid);
		},
		methods: {
			// 获取门票详情
			getGoods(uid){
				if (!uid) {
					return;
				}
				this.$api.app.goods.get({uid: uid}).then(res=>{
					let data = res.data;
					this.ticketData = data;
				});
			},
			// 点击购买
			onClickBuy(){
				let {ticketData} = this;
				let stock = ticketData.stock || 0;
				if (stock <= 0) {
					this.$utils.showToast("暂无库存")
					return;
				}
				uni.navigateTo({
					url: '/pages/yuYue/toOrder/toOrder?ticketData=' + JSON.stringify(ticketData)
				})
			},
		}
	}
</script>

<style>
	.detail-wrapper{
		position: relative;
	}
	
	/* 详细信息 */
	.info-box {
		position: relative;
		background-color: #FFFFFF;
	}
</style>
